<template>

	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :fatherCss="'box-shadow: none'" :isBack="true">
			<block slot="backText"></block>
		</cu-custom>
		<view class="head-update">
			<image :src="oss_url+nowLogo" mode="" @click="upImg"></image>
			<text>点击头像即可更换</text>
		</view>
		<view class="logo-show">
			<view class="title-temp">
				<text></text>
				<text>选择背景</text>
			</view>
			<view class="list">
				<view class="" v-for="(item,index) in logoList" :key="index" @click="truth(item.url)">
					<image :src="oss_url+item.url" mode="" :class="item.flag?'active':''"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var uploadImage = require('@/utils/updateFile/uploadFile.js');
	var util = require('@/utils/formatDate.js');
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				nowLogo: 'resources/Original-logo.png',
				logoList: [],
				oss_url: '',
			}
		},
		onLoad(options) {
			if(options.logo){
				this.nowLogo = options.logo
			}
			this.getInfo()
		},
		methods: {
			// 上传图片
			upImg() {
				var that = this;
				uni.chooseImage({
					count: 1, // 默认最多一次选择9张图
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths;
						var nowTime = util.formatTime(new Date());

						//显示消息提示框
						uni.showLoading({
							title: '上传中',
							mask: true
						})

						//上传图片
						//你的域名下的/cbb文件下的/当前年月日文件下的/图片.png
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'chainLogo/',
							function(result) {
								that.upShopsImg = result
								that.nowLogo = 'chainLogo/'+result.split('chainLogo/')[1]
								uni.hideLoading();
								uni.showModal({
									content: '上传成功',
									confirmText: '立即返回',
									cancelText: '再看看',
									success: function(res) {
										if (res.confirm) {
											uni.setStorageSync('truthLogo', that.nowLogo)
											uni.navigateBack({
												delta: 1
											})
										} else if (res.cancel) {

										}
									}
								});
							},
							function(err) {
								uni.hideLoading()
								uni.showToast({
									title: JSON.stringify(err),
									icon: 'none'
								})
							}
						)
					}
				})
			},
			getInfo() {
				var that = this
				this.$request({
					url: '/ChainShop/get_color_logo',
					success: res => {
						if (res.data.status == 1) {
							var list = []
							res.data.data.logo.forEach(item => {
								var thisItem = {}
								thisItem.url = item
								if (item.indexOf('template1') > -1) {
									thisItem['flag'] = true
								} else {
									thisItem['flag'] = false
								}
								list.push(thisItem)
							})
							that.logoList = list
							that.oss_url = res.data.data.oss_url
							uni.showToast({
								title: '直接点击选择',
								icon: 'none'
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			truth(val) {
				uni.showModal({
					content: '选择联盟Logo成功',
					confirmText: '立即返回',
					cancelText: '再看看',
					success: function(res) {
						if (res.confirm) {
							uni.setStorageSync('truthLogo', val)
							uni.navigateBack({
								delta: 1
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style scoped>
	.head-update {
		width: 100%;
		height: 470rpx;
		background-color: #f34930;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.head-update image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 30rpx;
		border-radius: 100%;
	}

	.head-update text {
		text-align: center;
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
	}

	.title-temp {
		height: 106rpx;
		display: flex;
		align-items: center;
		/* padding: 0 24rpx; */
		width: 100%;

	}

	.title-temp>text:nth-child(1) {
		width: 6rpx;
		height: 36rpx;
		background-color: #f34930;
		margin-right: 20rpx;
	}

	.title-temp>text:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.logo-show {
		width: 100%;
		padding: 0 24rpx;
	}

	.logo-show .list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.logo-show .list>view:nth-child(4n) {
		margin-right: 0 !important;
	}

	.logo-show .list>view {
		width: 160rpx;
		height: 160rpx;
		background-color: #e6e6e6;
		margin-right: 20rpx;
		border-radius: 100%;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.logo-show .list>view image {
		width: 156rpx;
		height: 156rpx;
	}

	.logo-show .list>view .active {
		width: 120rpx;
		height: 120rpx;
	}
</style>
